<template>
    <div class="update-seat">
        <div class="flex-start-row" style="margin-bottom: 20px">
            <!-- 选择影厅-->
            <el-select v-model="roomId" placeholder="请选择影厅" size="large" style="margin-right: 20px;"
                @change="handleRoomChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <!-- 更新座位的卡片 -->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>更新座位</span>
                </div>
            </template>
            <div class="seat-content center">
                <div v-if="seatList.length > 0">
                    <div v-for="item1 in row" class="center">
                        <el-checkbox v-for="item2 in row" size="large"
                            v-model="seatList[(item1 - 1) * col + item2 - 1].seatStatus"
                            @change="handleSeatChange(item1, item2)" />
                    </div>
                </div>

                <el-empty description="请选择影厅" v-else />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue'
import { getAvailableRoomsByCinema } from '../../../../../api/room'
import { getSeatByRoom, updateSeatStatus } from '../../../../../api/seat'
let row = ref(0)
let col = ref(0)
let cinemaId = ref(0)

interface ISeatOption {
    label: string,
    value: number
}

interface ISeat {
    roomId: number,
    rowId: number,
    colId: number,
    row: number,
    col: number,
    seatStatus: boolean
}

let options = ref<ISeatOption[]>()
let seatList = ref<ISeat[]>([])
let roomId = ref<number>()

onMounted(() => {
    // 获得所有的影厅
    cinemaId.value = JSON.parse(window.sessionStorage.getItem("currentUser")!).unitId
    if (cinemaId.value > 0) {
        getAvailableRoomsByCinema({ cinemaId: cinemaId.value }).then((res: any) => {
            if (res.code == 200) {
                options.value = res.data.map((item: any) => {
                    return {
                        value: item.roomId,
                        label: item.roomName
                    }
                })
                console.log(res.data)
            } else {
                ElMessage.error("获取影厅列表失败")
            }
        })
    } else {
        ElMessage.error("找不到影院")
    }
})

const handleRoomChange = () => {
    // 获得指定影厅的id并获取seat
    // debugger
    if (roomId.value != undefined) {
        getSeatByRoom({ roomId: roomId.value }).then((res: any) => {
            if (res.code == 200) {
                debugger
                seatList.value = res.data.map((item: any) => {
                    return {
                        ...item,
                        seatStatus: item.seatStatus == 1 ? true : false
                    }
                })
                console.log("获得的座位信息:", seatList.value)
                row.value = res.data[0].rowNum
                col.value = res.data[0].colNum
            }
        })
    } else {
        ElMessage.error("未选择影厅")
    }

}

const handleSeatChange = (rw: number, cl: number) => {
    console.log("更改后座位的状态信息：", seatList.value[(rw - 1) * col.value + cl - 1].seatStatus)
    let seatStatus = seatList.value[(rw - 1) * col.value + cl - 1].seatStatus == true ? 1 : 0
    updateSeatStatus({ roomId: roomId.value, rowId: rw, colId: cl, seatStatus: seatStatus }).then((res: any) => {
        debugger
        if (res.code == 200) {
            ElMessage.success("座位更新成功")
        } else {
            ElMessage.error("座位更新失败")
        }
    })
}
</script>
<style lang='scss' scoped>
.box-card {
    height: 60%;
}

.seat-content {
    min-height: 450px;
    flex-direction: column;
    background-color: rgb(238, 238, 238);
}
</style>
